<template>
  <div>
    <div class="main">
      <el-card>
        <el-button @click="XinZeng" type="primary">新增模板</el-button>
        <el-table
          border
          stripe
          style="text-align: center; margin-top: 15px"
          :data="tableDate"
        >
          <el-table-column
            prop="templateType"
            label="模板类型"
          ></el-table-column>
          <el-table-column
            prop="transportType"
            label="运费类型"
          ></el-table-column>
          <el-table-column
            prop="associatedCityList"
            label="关联城市"
          ></el-table-column>
          <el-table-column prop="firstWeight" label="首重"></el-table-column>
          <el-table-column
            prop="continuousWeight"
            label="续重"
          ></el-table-column>
          <el-table-column
            prop="lightThrowingCoefficient"
            label="轻抛系数"
          ></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="bianEdit(row)">编辑</el-button>
              <span style="color: #ccc; margin: 3px">|</span>
              <el-button type="text" @click="delRow(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <el-dialog @close="clone" :title="title" :visible="showDone">
      <el-form :model="formData" style="margin-left: 80px">
        <el-form-item label="模板类型">
          <el-select v-model="formData.templateType">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运送类型">
          <el-select v-model="formData.transportType">
            <el-option label="普快" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联城市">
          <el-checkbox-group
            @change="Duoxaun"
            v-model="formData.associatedCityList"
          >
            <el-checkbox
              v-for="(city, index) in cities"
              :label="city"
              :key="city"
              :value="`${index}`"
              >{{ city }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="首重价格">
          <el-input
            v-model="formData.firstWeight"
            style="width: 80%"
            placeholder="请输首重价格"
          ></el-input>
        </el-form-item>
        <el-form-item label="续重价格">
          <el-input
            v-model="formData.continuousWeight"
            style="width: 80%"
            placeholder="请输入续重价格"
          ></el-input>
        </el-form-item>
        <el-form-item label="轻抛系数">
          <el-input
            v-model="formData.lightThrowingCoefficient"
            style="width: 80%"
            placeholder="请输入轻抛系数"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button style="margin-right: 20px" @click="clone">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getYunMoBanApi } from "@/api/JchuDate";

export default {
  data() {
    return {
      title: "",
      showDone: false,
      MobanType: "",
      tableDate: [],
      formData: {
        transportType: "",
        templateType: "",
        associatedCityList: [],
        firstWeight: "",
        continuousWeight: "",
        lightThrowingCoefficient: "",
      },
      options: [
        {
          value: "1",
          label: "同城寄",
        },
        {
          value: "2",
          label: "省内寄",
        },
        {
          value: "3",
          label: "经济区互寄",
        },
        {
          value: "4",
          label: "跨省",
        },
      ],
      cities: ["京津冀", "江沪浙", "川渝", "黑吉辽"],
      transportTypeMap: {
        1: "普快",
      },
      templateTypeMap: {
        1: "同城寄",
        2: "省内寄",
        3: "经济区互寄",
        4: "跨省",
      },
      associatedCityListMap: {
        1: "全国",
        2: "京津冀",
        3: "江沪浙",
        4: "川渝",
        5: "黑吉辽",
      },
    };
  },
  created() {
    this.getMoBanInfo();
  },
  methods: {
    submit() {
      // console.log(this.formData);
      this.formData.associatedCityList = this.formData.associatedCityList.map(
        (item) => {
          for (let key in this.associatedCityListMap) {
            console.log(key);
            if (this.associatedCityListMap[key] === item) {
              return key;
            }
          }
          // console.log(item);
        }
      );
      console.log(this.formData);
    },
    Duoxaun(value) {
      console.log(value);
    },
    clone() {
      this.showDone = false;
      this.formData = {
        transportType: "",
        templateType: "",
        associatedCityList: [],
        firstWeight: "",
        continuousWeight: "",
        lightThrowingCoefficient: "",
      };
    },
    delRow(id) {
      console.log(id);
    },
    bianEdit(row) {
      console.log(row);
      this.formData = row;
      this.title = "编辑模板";
      this.showDone = true;
    },
    XinZeng() {
      this.title = "新增模板";
      this.showDone = true;
    },
    handleNodeClick() {},
    async getMoBanInfo() {
      const res = await getYunMoBanApi();
      console.log(res.data.data);
      this.tableDate = res.data.data;
      this.tableDate.forEach((item) => {
        // console.log(item.associatedCityList);
        // console.log(item);
        item.transportType = this.transportTypeMap[item.transportType];
        item.templateType = this.templateTypeMap[item.templateType];
        item.associatedCityList = item.associatedCityList.map((item1) => {
          return this.associatedCityListMap[item1];
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  height: 80px;
  justify-content: space-between;
  .right {
    display: flex;
    justify-content: space-between;
    .right-avatar {
      line-height: 80px;
    }
    .right-text {
      margin-top: 10px;
      display: inline-block;
      margin-left: 7px;
    }
  }
}
::v-deep .main {
  //width: 100%;
  .el-card {
    width: 1200px;
    min-height: 300px;
    background-color: white;
  }
  .el-table th.el-table__cell > .cell,
  .el-table .cell {
    text-align: center;
  }
}
</style>
